<template>
  <div class="app-container" v-loading="pageLoading">
    <!-- <el-button type="primary" class="fr" @click="createItem">创建</el-button> -->
    <div class="filter-container">
      <el-select class="filter-item" style="width: 140px;" v-model="query.queryString.warehouse_id" placeholder="选择仓库"
        clearable>
        <el-option v-for="i in warehouseList" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 260px;" placeholder="输入物料查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.material"></el-input>
      <el-input style="width: 160px;" placeholder="输入供应商查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.vendor"></el-input>
      <el-input style="width: 160px;" placeholder="输入库位查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.stock_code"></el-input>
      <el-input style="width: 200px;" placeholder="批次号YYYYMMDD" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString.lot_date_code">
      </el-input>
      <el-input-number style="width: 160px;" placeholder="最小库龄" clearable class="filter-item"
        v-model="query.queryString.inventory_age"></el-input-number>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出
      </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key==='forbidden'">
          <span v-if="v.row.forbidden == 1" class="text-label bg-red">已禁用</span>
        </span>
        <span v-else-if="v.key==='qty'">
          <span style="cursor:pointer;" class="text-blue text-bold"
            @click="modifyInventory(v.row)">{{v.row[v.key]}}</span>
        </span>
        <span v-else>{{v.row[v.key]}}</span>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-green" @click.prevent="goDetail(v.row,v.$index)">批次异动明细&nbsp;</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.curPage" :limit.sync="query.pageSize"
      @change="getList"></z-pagination>
    <el-dialog title="调整库存" :visible.sync="modifyDialogVisible" width="50%" :close-on-click-modal="false">
      <el-input-number style="width: 240px;" v-model="data.qty" min="0"></el-input-number>
      <el-input style="margin-top: 12px" type="textarea" placeholder="请输入调整原因" v-model="data.reason">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'wInventoryModify',
  data: function () {
    return {
      api: this.$api.wInventoryDetail,
      name: '库存调整',
      columns: [
        { title: '仓库代码', key: 'warehouse_code', width: 100 },
        { title: '仓库名称', key: 'warehouse_name', width: 100 },
        { title: '库位代码', key: 'stock_code', width: 100 },
        { title: '料号', key: 'key_part_no', width: 180 },
        { title: '物料名称', key: 'key_part_name' },
        { title: '供应商代码', key: 'vendor_code', width: 100 },
        { title: '供应商名称', key: 'vendor_name', width: 180 },
        { title: '批次号', key: 'lot_date_code', width: 100 },
        { title: '库存数量', key: 'qty', width: 100 },
        { title: '单位', key: 'unit_name', width: 70 },
        { title: '库龄(天)', key: 'inventory_age', width: 100 },
        { title: '是否禁用', key: 'forbidden', width: 80 },
      ],
      fields: [],
      query: {
        queryString: {},
        pageSize: 10,
        curPage: 1,
      },
      tableProps: {
        border: true,
        opsColWith: 100,
        hideOperations: false,
      },
      warehouseList: [],
      InventoryType: true,
      modifyDialogVisible: false,
    }
  },
  methods: {
    goDetail(v) {
      this.$store.dispatch('delView', { name: 'wInventoryLog' }).then((r) => {
        this.$router
          .push({
            name: 'wInventoryLog',
            params: { warehouse_id: v.warehouse_id, material: v.key_part_no, lot_date_code: v.lot_date_code },
          })
          .catch(() => {})
      })
    },
    fetchParams() {
      this.query.queryString = Object.assign({}, this.query.queryString, this.$route.params)
      this.getList()
    },
    modifyInventory(row) {
      this.data = { id: row.id, qty: row.qty, reason: '' }
      this.modifyDialogVisible = true
    },
    getInventoryType() {
      this.$request(this.$api.wInventory + 'getinventorytype').then((r) => {
        this.InventoryType = r
        if (!r) {
          this.columns.unshift({
            title: '条码',
            key: 'sn',
            width: 140,
          })
        } else {
          let i = this.columns.findIndex((i) => i.key == 'sn')
          if (!!i) {
            this.columns.splice(i, 1)
          }
        }
        this.fetchParams()
      })
    },
    getList() {
      this.pageLoading = true
      let url = this.api + 'getlist'
      if (!this.InventoryType) {
        url = this.$api.wInventory + 'inventorysn/getlist'
      }
      this.$request(url, this.formatQuery(this.query), this.postForList ? 'post' : 'get')
        .then((r) => {
          this.list = this.formatList(r.list)
          this.total = r.total
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    submit() {
      if (!this.data.reason) {
        this.$message({
          message: '调整原因不能为空',
          type: 'error',
        })
        return
      }
      this.submitLoading = true
      let url = this.$api.wInventory + 'inventorymodify'
      this.$request(url, this.data)
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.modifyDialogVisible = false
          this.getList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
  },
  created: function () {
    this.getInventoryType()
    this.$request(this.$api.warehouse + 'getlist', {
      pageSize: 9999,
      curPage: 1,
    })
      .then((r) => {
        this.warehouseList = this.arrayOptions(r.list, 'id', ['warehouse_code', 'warehouse_name'])
      })
      .catch(() => {})
  },
}
</script>
<style scoped>
</style>
